function test() {
    $(".hotel").hover(function () {
        $(this).css("border", "2px solid #7F1F59")
        $(this).find("div").eq(9).css("background-color", "#7F1F59")
        $(this).find("span").eq(4).css("color", "white")
        var locate = $(this).find("div").eq(4).text()
        $("#hotellocatemap").html("<iframe src=../tool/mapall.html?add=\"" + locate + "\" width=\"100%\" height=\"500\"\n" +
            "                frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" allowtransparency=\"yes\">\n" +
            "      </iframe>")
    }, function () {
        $(this).css("border", " 1px solid #eeeae9")
        $(this).find("div").eq(9).css("background-color", "")
        $(this).find("span").eq(4).css("color", "#651C4D")
    });
}

var cityName = "上海市";
$("#city").blur(function () {
    cityName = $(this).val()
    if(cityName.indexOf("市") == -1){
        cityName = cityName + "市"
    }
    // console.log(cityName)
    var city = provice.filter(function(fp) {
        return fp.name === cityName
    })
    var areas = city[0].districtAndCounty;
    var html = "<table class=\"table\" id=\"locate\"><tr>";
    for(var i = 0;i < areas.length;i++){
        if((i + 1) %  9 != 0) {
            html = html + "<td><input type='checkbox' value='" + areas[i] + "' style='width: 11%' name='locate'>" + areas[i] + "</td>"
        }
        else {
            html = html + "<td><input type='checkbox' value='" + areas[i] + "' style='width: 11%' name='locate'>" + areas[i] + "</td></tr><tr>"
        }
    }
    html = html + "</tr></table>"
    // console.log(html)
    $(".table-responsive").eq(0).html(html)
    // 封装每次点击更行城市后都会运行这个方法，即新生成的区域列表也可以触发ajax请求
    test3()
    //封装每次更新区域列表都会将新的locate push到这个数组里面
    test2()
})
var searchUrl = window.location.href;
// alert(searchUrl)
var searchData = searchUrl.split("=");        //截取 url中的“=”,获得“=”后面的参数
var hotelNameUrl = decodeURI(searchData[1]);   //decodeURI解码
var ennIndex = hotelNameUrl.indexOf("&");
var brandname = hotelNameUrl.substring(0,ennIndex);

var startDateUrl = decodeURI(searchData[2]);
var ennIndex = startDateUrl.indexOf("&");
var startDate = startDateUrl.substring(0,ennIndex);
var endDateUrl = decodeURI(searchData[3]);
var ennIndex = endDateUrl.length;
var endDate = endDateUrl.substring(0,ennIndex);
if(endDate =='undefined'){
    endDate = ""
}

var brandchecked = [];
if(brandname){
    brandchecked.push(brandname)
}
if(startDate){
    $("#date-group1-1").attr("value",startDate)
}
if(endDate){
    $("#date-group1-2").attr("value",endDate)
}
var locatechecked = [];
var pricechecked = [];
var servicechecked = [];
var pagenum = 1;//第一页

//挑拣出用户点击的checkbox
function test2(){
    $("#locate").find("input").click(function () {
        locatechecked = [];
        $("input[name='locate']:checked").each(function () {
            if ($(this).is(':checked'))
            {
                locatechecked.push($(this).val())
            }
        })
        // console.log(locatechecked)
    })
}

test2()

$("#brand").find("input").click(function () {
    brandchecked = [];
    $("input[name='brand']:checked").each(function () {
        if ($(this).is(':checked'))
        {
            brandchecked.push($(this).val())
        }
    })
    // console.log(brandchecked)
})

$("#price").find("input").click(function () {
    pricechecked = [];
    $("input[name='price']:checked").each(function () {
        if ($(this).is(':checked'))
        {
            pricechecked.push($(this).val())
        }
    })
    // console.log(pricechecked)
})

$("#service").find("input").click(function () {
    servicechecked = [];
    $("input[name='service']:checked").each(function () {
        if ($(this).is(':checked'))
        {
            servicechecked.push($(this).val())
        }
    })
    // console.log(servicechecked)
})


function test3() {
    $("table").click(function () {
        pagenum = 1
        $.ajax({
            url: "http://localhost:8888/allHotel",
            data: "locate=" + locatechecked + "&brand=" + brandchecked + "&price=" + pricechecked + "&service=" + servicechecked + "&pageNum=" + pagenum + "&condition=" + condition,
            success: function (data) {
                // console.log(data)
                if (data[0]) {
                    $("#hotelnum").text(data[0].count)
                    $(".pagination-lg").html(pageNum(data[0].count))
                } else {
                    $("#hotelnum").text(0)
                    $(".pagination-lg").html(0)

                }
                if (data.length == 0) {
                    $("#test").html("<div style=\"width: 63%;margin-left: 5%;margin-top: 20px\">抱歉，没有符合要求的酒店!</div>")
                    return;
                }
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html = html + "<div style=\"width: 63%;margin-left: 5%;border: 1px solid #eeeae9;margin-top: 10px;height: 200px;float: left;\"\n" +
                        "     class=\"hotel\">\n" +
                        "    <div style=\"width: 76%;float:left;border-right: 1px dashed black;height: 160px;margin-top: 20px\">\n" +
                        "        <div style=\"width: 28%;height: 180px;margin-left: 3%;border-right: 10px;float: left\">\n" +
                        "            <img src='" + data[i].hotelImgUrl + "' alt=\"zcj\" width=\"100%\" height=\"160px\">\n" +
                        "        </div>\n" +
                        "        <div style=\"float: left;margin-left: 3%\">\n" +
                        "            <div style=\"font-size: 18px;color: #7F1F59;margin-top: 10px\">" + data[i].hotelName + "</div>\n" +
                        "            <div style=\"margin-top: 10px;font-size: 14px\">" + data[i].hotelLocate + "</div>\n" +
                        "        </div>\n" +
                        "        <div style=\"float: right;margin-right: 5%;margin-top:130px\"><img src=\"../img/已收藏.png\"\n" +
                        "                                                                         width=\"20px\">收藏<span>41</span></div>\n" +
                        "    </div>\n" +
                        "    <div style=\"width: 24%;float: right\">\n" +
                        "        <div style=\"margin-left: 50%;margin-top: 20px\"><span style=\"font-size: 25px;color: darkorange\">￥" + data[i].hotelMinimumCharge + "</span>&nbsp;起\n" +
                        "        </div>\n" +
                        "        <div style=\"margin-left: 13%;\">\n" +
                        "            <span>\n" +
                        score2(data[i].hotelScore) +
                        "            </span>\n" +
                        "            <span>\n" +
                        "                " + data[i].hotelScore + "\n" +
                        "            </span>/5\n" +
                        "        </div>\n" +
                        "        <div style=\"margin-left: 50%;margin-top: 30%;color:#651C4D;border: 1px solid #651C4D;height: 27px;text-align: center;width: 35%;border-radius: 3px;cursor: pointer\">\n" +
                        "            <span style=\"line-height: 27px\" onclick='getHotelInfoByhotelName(this)'>查看详情</span>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "</div>"
                }
                $("#test").html(html)
                test()

            }
        })
    })
}

test3()

$(".pagination").click(function () {
    $.ajax({
        url:"http://localhost:8888/allHotel",
        data:"locate=" + locatechecked + "&brand=" + brandchecked +"&price=" + pricechecked + "&service=" + servicechecked + "&pageNum=" + pagenum+ "&condition="  + condition,
        success:function (data) {
            console.log(data)
            if(data[0]){
                $("#hotelnum").text(data[0].count)
                // $(".pagination-lg").html(pageNum(data[0].count))

            }
            else {
                $("#hotelnum").text(0)
                $(".pagination-lg").html(0)

            }            if(data.length == 0){
                $("#test").html("<div style=\"width: 63%;margin-left: 5%;margin-top: 20px\">抱歉，没有符合要求的酒店!</div>")
                return;
            }
            var html = "";
            // console.log(data)
            for(var i = 0;i < data.length;i++){
                html = html + "<div style=\"width: 63%;margin-left: 5%;border: 1px solid #eeeae9;margin-top: 10px;height: 200px;float: left;\"\n" +
                    "     class=\"hotel\">\n" +
                    "    <div style=\"width: 76%;float:left;border-right: 1px dashed black;height: 160px;margin-top: 20px\">\n" +
                    "        <div style=\"width: 28%;height: 180px;margin-left: 3%;border-right: 10px;float: left\">\n" +
                    "            <img src='"+data[i].hotelImgUrl+"' alt=\"zcj\" width=\"100%\" height=\"160px\">\n" +
                    "        </div>\n" +
                    "        <div style=\"float: left;margin-left: 3%\">\n" +
                    "            <div style=\"font-size: 18px;color: #7F1F59;margin-top: 10px\">"+data[i].hotelName+"</div>\n" +
                    "            <div style=\"margin-top: 10px;font-size: 14px\">"+data[i].hotelLocate+"</div>\n" +
                    "        </div>\n" +
                    "        <div style=\"float: right;margin-right: 5%;margin-top:130px\"><img src=\"../img/已收藏.png\"\n" +
                    "                                                                         width=\"20px\">收藏<span>41</span></div>\n" +
                    "    </div>\n" +
                    "    <div style=\"width: 24%;float: right\">\n" +
                    "        <div style=\"margin-left: 50%;margin-top: 20px\"><span style=\"font-size: 25px;color: darkorange\">￥"+ data[i].hotelMinimumCharge +"</span>&nbsp;起\n" +
                    "        </div>\n" +
                    "        <div style=\"margin-left: 13%;\">\n" +
                    "            <span>\n" +
                    score2(data[i].hotelScore)   +

                    "            </span>\n" +
                    "            <span>\n" +
                    "                "+ data[i].hotelScore+"\n" +
                    "            </span>/5\n" +
                    "        </div>\n" +
                    "        <div style=\"margin-left: 50%;margin-top: 30%;color:#651C4D;border: 1px solid #651C4D;height: 27px;text-align: center;width: 35%;border-radius: 3px;cursor: pointer\">\n" +
                    "            <span style=\"line-height: 27px\" onclick='getHotelInfoByhotelName(this)'>查看详情</span>\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "</div>"
            }
            $("#test").html(html);
            test()

        }
    })
})

$(function () {
    pagenum = 1
    $.ajax({
        url:"http://localhost:8888/allHotel",
        data:"locate=" + locatechecked + "&brand=" + brandchecked +"&price=" + pricechecked + "&service=" + servicechecked + "&pageNum=" + pagenum + "&condition="  + condition,
        success:function (data) {
            if(data[0]){
                $("#hotelnum").text(data[0].count)
                $(".pagination-lg").html(pageNum(data[0].count))
            }
            else {
                $("#hotelnum").text(0)
                $(".pagination-lg").html(0)

            }
            if(data.length == 0){
                $("#test").html("<div style=\"width: 63%;margin-left: 5%;margin-top: 20px\">抱歉，没有符合要求的酒店!</div>")
                return;
            }
            var html = "";
            // console.log(data)
            for(var i = 0;i < data.length;i++){
                html = html + "<div style=\"width: 63%;margin-left: 5%;border: 1px solid #eeeae9;margin-top: 10px;height: 200px;float: left;\"\n" +
                    "     class=\"hotel\">\n" +
                    "    <div style=\"width: 76%;float:left;border-right: 1px dashed black;height: 160px;margin-top: 20px\">\n" +
                    "        <div style=\"width: 28%;height: 180px;margin-left: 3%;border-right: 10px;float: left\">\n" +
                    "            <img src='"+data[i].hotelImgUrl+"' alt=\"zcj\" width=\"100%\" height=\"160px\">\n" +
                    "        </div>\n" +
                    "        <div style=\"float: left;margin-left: 3%\">\n" +
                    "            <div style=\"font-size: 18px;color: #7F1F59;margin-top: 10px\">"+data[i].hotelName+"</div>\n" +
                    "            <div style=\"margin-top: 10px;font-size: 14px\">"+data[i].hotelLocate+"</div>\n" +
                    "        </div>\n" +
                    "        <div style=\"float: right;margin-right: 5%;margin-top:130px\"><img src=\"../img/已收藏.png\"\n" +
                    "                                                                         width=\"20px\">收藏<span>41</span></div>\n" +
                    "    </div>\n" +
                    "    <div style=\"width: 24%;float: right\">\n" +
                    "        <div style=\"margin-left: 50%;margin-top: 20px\"><span style=\"font-size: 25px;color: darkorange\">￥"+ data[i].hotelMinimumCharge +"</span>&nbsp;起\n" +
                    "        </div>\n" +
                    "        <div style=\"margin-left: 13%;\">\n" +
                    "            <span>\n" +
                        score2(data[i].hotelScore)   +
                    "            </span>\n" +
                    "            <span>\n" +
                    "                "+ data[i].hotelScore+"\n" +
                    "            </span>/5\n" +
                    "        </div>\n" +
                    "        <div style=\"margin-left: 50%;margin-top: 30%;color:#651C4D;border: 1px solid #651C4D;height: 27px;text-align: center;width: 35%;border-radius: 3px;cursor: pointer\">\n" +
                    "            <span style=\"line-height: 27px\" onclick='getHotelInfoByhotelName(this)'>查看详情</span>\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "</div>"
            }
            $("#test").html(html);
            test()

        }
    })
})

function getHotelInfoByhotelName(obj) {
    //点击搜索
    // alert(11)
    var startDate = $("#date-group1-1").val();
    var endDate =  $("#date-group1-2").val();
    var hotelName= jQuery.trim($(obj).parent().parent().parent().find("div").eq(3).text());
    var searchUrl =encodeURI("../../html/hotel.html?hotelName="+hotelName + "&startDate=" + startDate + "&endDate=" + endDate);   //使用encodeURI编码
    window.location.href =searchUrl;
}

function score2(number) {
    var flag = 0;
    var fullStar = "<img src=\"../img/五角星%20全星.png\" alt=\"\" width=\"12px\">";
    var halfStar = "<img src=\"../img/五角星%20半星.png\" alt=\"\" width=\"12px\">";
    var star = "<img src=\"../img/五角星.png\" alt=\"\" width=\"12px\">";
    var starHtml = "";
    for (var i = 0; i < Math.floor(number); i++) {
        // console.log("一颗漫心")
        starHtml = starHtml + fullStar;
        flag = flag + 1
    }
    if (number % 1 != 0) {
        // console.log("一颗半星")
        starHtml = starHtml + halfStar;

        flag = flag + 1
    }
    for (flag; flag < 5; flag++) {
        // console.log("一颗空心")
        starHtml = starHtml + star;
    }
    return starHtml;
}


//处理页数问题
function pageNum(num) {
    var html = " <li>\n" +
        "                <a href=\"#\" aria-label=\"Previous\">\n" +
        "                    <span aria-hidden=\"true\">&laquo;</span>\n" +
        "                </a>\n" +
        "            </li>"
    if(num / 5 != 0 && num > 0){
        for(var i = 0; i < num / 5; i++){
            if(i == 0){
                html = html + "<li class=\"active\" onclick='page(this)'><a href=\"###\">"+ (i + 1) +"</a></li>\n";
            }
            else {
                html = html + "<li onclick='page(this)'><a href=\"###\">" + (i + 1) + "</a></li>"
            }
        }
        html = html + "            <li>\n" +
            "                <a href=\"#\" aria-label=\"Next\">\n" +
            "                    <span aria-hidden=\"true\">&raquo;</span>\n" +
            "                </a>\n" +
            "            </li>";
        // console.log(html)
    }
    return html;
}
function page(obj) {
    $(".pagination>li").each(function () {
        $(this).attr("class","")
    })
    $(obj).attr("class", "active")
    pagenum = $(obj).find("a").text()
    console.log(pagenum)
}


function searchHotelByKeyWords() {
    var cityName = $("#city").val()
    var moveInDate = $("#date-group1-1").val()
    var moveOutDate = $("#date-group1-2").val()
    var keyWord = $("input[name='keywords']").val()
    $.ajax({
        url:"http://localhost:8888/searchByKeyWord",
        // url:"http://localhost:8888/allHotel",
        data:"cityName="+cityName+"&keyWord=" + keyWord + "&brandName="+brandname,
        success:function (data) {
            alert("success")
        }
    })

}

